<template>
  <div>
    <el-tabs v-model="activeName" @tab-click="handleTabClick">
      <el-tab-pane label="未完成" name="first"></el-tab-pane>
      <el-tab-pane label="已完成" name="second"></el-tab-pane>
    </el-tabs>
    <template v-if="listData.length > 0">
      <el-row :gutter="24">
        <el-col class="mb20" v-for="(item,index) in listData" :key="index" :span="8">
          <el-card shadow="never" class="list-card">
            <div slot="header" class="tl-center">
              <span>{{item.taskTitle}}</span>
              <el-tooltip class="item" effect="dark" content="详情" placement="top">
                <i @click.stop="handleDetail(item)" class="fr mr10 curp fs16 el-icon-document" />
              </el-tooltip>
              <!-- <el-tooltip class="item" effect="dark" content="开始考评" placement="top">
                <i @click.stop="handleEvaluate(item)" class="fr curp fs16 el-icon-mouse" />
              </el-tooltip>
              <el-tooltip class="item" effect="dark" content="删除" placement="top">
                <i @click.stop="handleDelete(item)" class="red mr10 fr curp fs16 el-icon-delete" />
              </el-tooltip>-->
            </div>
            <el-form label-width="100px">
              <el-form-item label="任务类型">
                <span>{{ item.internalPlanType && computeTitle(item.internalPlanType) }}</span>
              </el-form-item>
              <el-form-item label="任务日期">
                <span>{{ item.startDate ? formatTime(item.startDate, 'day') : null }}{{ item.endDate ? `至${formatTime(item.endDate, 'day')}` : null }}</span>
              </el-form-item>
              <el-form-item label="任务状态">
                <span>
                  <el-tag :type="judgeType(item.state)">{{ judgeState(item.state) }}</el-tag>
                </span>
                <el-tooltip
                  v-if="item.state === 2"
                  class="item"
                  effect="dark"
                  content="作废"
                  placement="top"
                >
                  <i
                    @click.stop="handleChangeState(item)"
                    class="ml10 curp red fs16 el-icon-error"
                  />
                </el-tooltip>
                <el-tooltip
                  v-if="item.state === 1"
                  class="item"
                  effect="dark"
                  content="启用"
                  placement="top"
                >
                  <i
                    @click.stop="handleChangeState(item)"
                    class="ml10 curp fs16 el-icon-video-play"
                  />
                </el-tooltip>
              </el-form-item>
              <el-form-item label="进度">
                <el-progress
                  :text-inside="true"
                  color="#52c41a"
                  :percentage="Math.floor(item.percent ? item.percent : 0 )"
                  :stroke-width="20"
                  style="margin-top:11px"
                />
              </el-form-item>
              <el-form-item label="未完成数">{{ item.executorUserNum ? item.executorUserNum : 0 }}</el-form-item>
              <el-form-item label="已完成数">{{ item.performUserNum ? item.performUserNum : 0 }}</el-form-item>
            </el-form>
          </el-card>
        </el-col>
        <el-col class="tl-center nomoreWord" v-show="noMore">---- 这是我的底线 ----</el-col>
      </el-row>
    </template>
    <template v-else>
      <empty-comp ref="emptyComp" />
    </template>
  </div>
</template>

<script>
import { openNotification, judgeRange, judgeEvalState, judgeType } from '@/utils/util'
import { taskPage, planUpdateParam, taskDelete, getFinishAll, getNotFinishAll } from '@/api/satisfaction'
export default {
  data() {
    return {
      listData: [],
      total: 1,
      queryParam: {
        pageSize: 10,
        pageNo: 1
      },
      activeName: 'first',
      noMore: false
    }
  },
  mounted() {
    this.getPlanList()
    window.addEventListener('scroll', this.getScroll)
  },
  destroyed() {
    window.removeEventListener('scroll', this.getScroll)
  },
  methods: {
    getScroll() {
      if (document.documentElement.scrollTop + document.documentElement.clientHeight >= document.documentElement.scrollHeight) {
        this.loadMore()
      }
    },
    loadMore() {
      if (this.queryParam.pageNo * 10 > this.total) {
        this.noMore = true
      } else {
        this.queryParam.pageNo += 1
        this.getPlanList(this.queryParam)
      }
    },
    handleTabClick() {
      console.log('activeName', this.activeName)
      this.queryParam.pageNo = 1
      this.listData = []
      if (this.activeName === 'first') {
        this.getPlanList()
      } else {
        this.getFinishList()
      }
    },
    computeTitle(num) {
      let str = ''
      switch (num) {
        case 1:
          str = '科间互评'
          break
        case 2:
          str = '科内互评'
          break
        case 3:
          str = '评上级领导'
          break
        case 4:
          str = '自定义'
          break
        default:
          break
      }
      return str
    },
    // 处理数组数据显示
    computeExecutor(arr) {
      let executor = []
      arr.map(v => {
        executor.push(v.name)
      })
      return executor.join('、')
    },
    // 删除
    handleDelete(row) {
      const _this = this
      this.$confirm({
        title: '删除操作',
        content: `您确定删除[${row.taskTitle}]这条记录吗？`,
        okText: '确定',
        okType: 'danger',
        cancelText: '取消',
        centered: true,
        async onOk() {
          // 调用删除接口，刷新表格数据
          const res = await taskDelete(row.internalTaskId, {})
          openNotification('success', '删除成功')
          const index = _this.listData.findIndex(v => v.internalTaskId === row.internalTaskId)
          _this.listData.splice(index, 1)
          // _this.handleGetList()
        }
      })
    },
    getFinishList(param = {}) {
      this.queryParam = Object.assign(this.queryParam, param)
      getFinishAll(this.queryParam).then(res => {
        if (this.queryParam.pageNo === 1) {
          this.listData = []
          this.listData = [...res.data.records]
        } else {
          this.listData = [...this.listData, ...res.data.records]
        }
        this.total = res.data.total
        if (this.queryParam.pageNo * 10 > this.total) {
          this.noMore = true
        }
      })
    },
    getPlanList(param = {}) {
      this.queryParam = Object.assign(this.queryParam, param)
      getNotFinishAll(this.queryParam).then(res => {
        console.log('taskPage', res)
        if (this.queryParam.pageNo === 1) {
          this.listData = []
          this.listData = [...res.data.records]
        } else {
          this.listData = [...this.listData, ...res.data.records]
        }
        this.total = res.data.total
        if (this.queryParam.pageNo * 10 > this.total) {
          this.noMore = true
        }
      })
    },
    judgeType(num) {
      return judgeType(num)
    },
    judgeState(num) {
      return judgeEvalState(num)
    },
    judgeRange(num) {
      return judgeRange(num)
    },
    async handleChangeState(item) {
      const _this = this
      if (item.state === 2) {
        this.$confirm({
          title: '作废操作',
          content: `您确定作废[${item.taskTitle}]这条记录吗？`,
          okText: '确定',
          okType: 'danger',
          cancelText: '取消',
          centered: true,
          async onOk() {
            // 调用删除接口，刷新表格数据
            const res = await planUpdateParam({ internalTaskId: item.internalTaskId, state: 4 })
            if (res.state === '000000') {
              openNotification('success', '作废操作成功')
              const index = _this.listData.findIndex(v => v.internalTaskId === item.internalTaskId)
              _this.$set(_this.listData[index], 'state', 4)
            }
          }
        })
      } else if (item.state === 1) {
        const res = await planUpdateParam({ internalTaskId: item.internalTaskId, state: 2 })
        if (res.state === '000000') {
          openNotification('success', '启用操作成功')
          const index = _this.listData.findIndex(v => v.internalTaskId === item.internalTaskId)
          _this.$set(_this.listData[index], 'state', 2)
          // _this.getPlanList()
        }
      }
    },
    handleEvaluate(row) {
      this.$router.push({
        name: 'satisfactionStartTest',
        params: { row }
      })
    },
    handleDetail(item) {
      this.$router.push({
        path: '/satisfaction/satisfaction-taskDetail',
        query: { row: JSON.stringify(item), type: 'all' }
      })
    }
  }
}
</script>

<style scoped>
.el-form-item {
  margin-bottom: 10px;
}
</style>